<template>
  <div class="main">
        <div class="box">
            <el-card :body-style="{height: '100%',width: '100%'}">
                <div id="chart1"></div>
            </el-card>
            <el-card :body-style="{height: '100%',width: '100%'}">
                <div id="chart2"></div>
            </el-card>
            <el-card :body-style="{height: '100%',width: '100%'}">
                <div id="chart3"></div>
            </el-card>
            <el-card :body-style="{height: '100%',width: '100%'}">
                <div id="chart4"></div>
            </el-card>
        </div>
        
  </div>
</template>

<script>
import * as echarts from 'echarts';  

export default {
    data() {
      return {
            form: {
                query: {
                    id: "",
                    mname: "",
                    mprice: "",
                    mphoto: "",
                    mremark: ""
                },
                pageInfo: {
                    pageNum: 1,
                    pageSize: 200
                }
            },
      };
    },
    mounted () {
        // 加载获取图表数据
        this.getMonthData()
        this.getDayData()
        this.getMenu()
        this.getOrder()
    },
    methods: {
        getMonthData () { // 获取月总收入值
            this.$http.get('order/queryAllOrderPriceByMonth').then(res => {
                if (res.data.meta.status == 200) {
                    console.log(res)
                    let x = []
                    let d = []
                    let monthData = res.data.data
                    for (let i=0; i<monthData.length; i++) {
                        x.push(monthData[i].orderTime)
                        d.push(parseInt(monthData[i].orderSum))
                    }
                    // 渲染
                    this.showChart2(x, d)
                } else {
                    this.$message({type: 'error', message: '获取月总收入失败'})
                }
            })
        },
        getDayData () { // 获取日总收入值
            this.$http.get('order/queryAllOrderPriceByWeek').then(res => {
                if (res.data.meta.status == 200) {
                    console.log(res)
                    let x = []
                    let d = []
                    let dayData = res.data.data
                    for (let i=0; i<dayData.length; i++) {
                        x.push(dayData[i].orderTime)
                        d.push(parseInt(dayData[i].orderSum))
                    }
                    this.showChart1(x, d)
                } else {
                    this.$message({type: 'error', message: '获取日总收入失败'})
                }
            })
        },
        getMenu () { // 获取菜单销量
            this.loading = true
            this.$http.post('menu/queryAllMenuUnit', this.form).then(res => {
                this.loading = false
                if (res.data.meta.status == 200) {
                    console.log(res.data)
                    let data = []
                    for (let i=0; i<res.data.data.list.length; i++) {
                        let menu = {
                            name: res.data.data.list[i].mname,
                            value: res.data.data.list[i].msale
                        }
                        if (res.data.data.list[i].msale > 0) data.push(menu)
                    }
                    this.showChart3(data)
                    // this.tableData = res.data.data.list
                } else {
                    this.$message({type: 'error', message: '获取菜单销量失败'})
                }
            })
        },
        getOrder () { // 获取日均客单价
            this.$http.get('order/queryAllOrderPriceByDay').then(res => {
                if (res.data.meta.status == 200) {
                    console.log(res)
                    let x = []
                    let d = []
                    let dayData = res.data.data
                    for (let i=0; i<dayData.length; i++) {
                        x.push(dayData[i].orderTime)
                        d.push(parseInt(dayData[i].orderSum))
                    }
                    this.showChart4(x, d)
                } else {
                    this.$message({type: 'error', message: '获取日均客单价失败'})
                }
            })
        },
        // 以下均为根据值渲染图表，组件做好的，不必扣如何实现
        showChart1 (x, d) {
            var myChart1 = echarts.init(document.getElementById('chart1'));
            myChart1.setOption({
                title: {
                    text: '日总收入'
                },
                xAxis: {
                    type: 'category',
                    data: x
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: d,
                    type: 'line'
                    }
                ]
            })
        },
        showChart2 (x, d) {
            var myChart2 = echarts.init(document.getElementById('chart2'));
            myChart2.setOption({
                title: {
                    text: '月总收入'
                },
                tooltip: {},
                xAxis: {
                    data: x
                },
                yAxis: {},
                series: [
                    {
                    name: '销量',
                    type: 'bar',
                    data: d
                    }
                ]   
            });
        },
        showChart3 (data) {
            var myChart3 = echarts.init(document.getElementById('chart3'));
            myChart3.setOption({
                title: {
                    text: '菜品销量',
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 'right'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            })
        },
        showChart4 (x, d) {
            console.log(x,d)
            var myChart4 = echarts.init(document.getElementById('chart4'));
            myChart4.setOption({
                title: {
                    text: '日均客单价'
                },
                xAxis: {
                    type: 'category',
                    data: x
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: d,
                    type: 'line'
                    }
                ]
            })
        }
    }
}
</script>

<style scoped>
.main {
    height: 100%;
}
.box {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.el-card {
    width: 48%;
    height: 48%;
    margin: 10px ;
}
.dishes-content {
    display: flex;
    justify-content: space-between;
}
.dishes-content img {
    width: 90px;
    height: 90px;
}
.dishes-content .title {
    width: 45%;
    font-size: 18px;
    font-weight: 700;
}
.dishes-content .title .remark {
    margin-top: 20px;
    font-size: 14px;
    color: #999;
}
.dishes-content .money {
    font-size: 24px;
    text-align: right;
    color: red;
}
.dishes-content .money .el-input-number--mini {
    margin-top: 20px;
    width: 90px;
}
.car {
    position: fixed;
    right: 40px;
    bottom: 40px;
}
.tatal {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 50px;
    margin-top: 50px;
    border-radius: 100px;
    background: #2b4b6b;
    color: #FFF;
    line-height: 50px;
}
.content-box {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #F2F2F2;
    padding: 20PX;
    border-radius: 5px;
}
#chart1, #chart2, #chart3, #chart4 {
    width: 90%;
    height: 100%;
}
</style>
<style>
.order-dialog .el-dialog__body{
  max-height: 500px;
    overflow: auto;
}
</style>